<template>
  <div class="rights">
    <!-- 打卡 -->
    <div class="header">
      <router-link to="/Backstage" class="shou">首页</router-link> / 权限管理 / 权限列表
    </div>
    <!-- 中间的表格 -->
    <div class='biaoge'>
      <el-table :data="tableData" height="500px" overflow:hidden  style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="authName" label="权限名称" width="180"></el-table-column>
        <el-table-column prop="path" label="路径" width="180"></el-table-column>
        <el-table-column label="层级">
          <template slot-scope="scope">
            {{scope.row.level}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script> 
import axios from 'axios';
import {qxlb} from '../../api/api.js'
export default {
    name:'rights',
    data() {
      return {
        tableData: [],
      }
    },
    methods:{
      qxlba(){
        qxlb({
          type:"list"
        }).then(res=>{
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            this.tableData=res.data.data
            console.log(this.tableData)
            for(let i=0;i<this.tableData.length;i++){
              if(this.tableData[i].level==0){
                this.tableData[i].level="一级"
              }else if(this.tableData[i].level==1){
                this.tableData[i].level="二级"
              }else if(this.tableData[i].level==2){
                this.tableData[i].level="三级"
              }
            }
          }
        })
      }
    },
    created(){
      this.qxlba()
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.rights{
  height:832px;
  width:1620px;
  background-color: #fff;
  border:1px solid #E9EEF3;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 20px;
}
.header{
  color:#606266;
  letter-spacing:2px;
}
.shou{
  font-weight: bold;
  color:black;
}

</style>
